<template>
  <z-input v-model:value="value1" prefix="￥" suffix="RMB" />
  <div style="margin: 24px 0" />
  <z-input v-model:value="value2" allow-clear>
    <template #prefix>
      <user-outlined />
    </template>
    <template #suffix>
      <z-button  type="text">
        <template #icon><info-circle-outlined /></template>搜索
      </z-button>
    </template>
  </z-input>
  <div style="margin: 24px 0" />
  <z-input v-model:value="value2" allow-clear>
    <template #prefix>
      <user-outlined />
    </template>
    <template #suffix>
      <info-circle-outlined />
    </template>
  </z-input>
  <div style="margin: 24px 0" />
  <z-input v-model:value="value2">
    <template #suffix>
      <search-outlined style="cursor: pointer" @click="searchBtn" />
    </template>
  </z-input>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'InputDemo2',
  setup(){
    const value1 = ref('')
    const value2 = ref('')
    const searchBtn = () => {
      alert('点击搜索图标')
    }
    return {
      value1,
      value2,
      searchBtn
    }
  }
})
</script>
